<template>
  <div @click="handleSelect()" :class="['vehicletype__card', (id == this.value.id) ? 'active': '']">
      <div class="vehicletype__card__image">
          <span v-if="!(this.value && this.value.carImage)" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="imgView" width="100%" alt=""/>
      </div>
      <div class="vehicletype__card__detail">
          <div class="vehicletype__card__detail__item">
              <span>{{ $t('typeCode') }}</span>
              <span>{{  value.carTypeCode  }}</span>
          </div>
          <div class="vehicletype__card__detail__item">
              <span>{{ $t('typeName') }}</span>
              <span>{{  value.carTypeName  }}</span>
          </div>
          <!-- <div class="vehicletype__card__detail__item">
              <span>押金:</span>
              <span>{{  value.deposit  }}元</span>
          </div> -->
      </div>
  </div>
</template>

<i18n>
  {
    "zh-CN": {
      "typeName":"类型名称",
      "typeCode":"类型编号"
    },
    "en-US": {
      "typeName":"Type Name",
      "typeCode":"Type Number"
    },
    "fr-FR": {
      "typeName":"Nom du type",
      "typeCode":"Numéro de type"
    }
  }
</i18n>

<script>
import { getFileAccessHttpUrl } from '@/api/manage'
export default {
  name: "EBikeTypeCard",
  props:{
      value:{
          type: Object,
          default: () => {}
      },
      id:{
          type: String,
          default: ""
      },
  },
  data(){
      return {
        
      }
  },
  watch:{
    
  },
  computed:{
       imgView(){
          if(this.value && this.value.carImage  && this.value.carImage.indexOf(",")>0){
              this.value.carImage = this.value.carImage.substring(0,this.value.carImage.indexOf(","))
          }
          return getFileAccessHttpUrl(this.value.carImage)
      },
  },
  mounted(){

  },
  methods:{
      handleSelect(){
          console.log("handleSelect:", this.value);
          this.$emit("change", this.value);
          this.$emit("update:id", this.value.id);
      }
  }
}
</script>

<style lang="less" scoped>
.vehicletype__card{
  width: calc(33.3% - 40px);
  margin: 20px;
  padding: 20px;
  background-color: #FFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  &:hover{
      cursor: pointer;
      box-shadow: 0px 4px 20px -4px rgba(0, 0, 0, 0.5);
  }
  &.active{
      box-shadow: 0px 4px 20px -4px rgba(4, 245, 104, 0.826);
  }
  .vehicletype__card__image{
      width: 100%;
      height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .vehicletype__card__detail{
      margin-top: 10px;
      .vehicletype__card__detail__item{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
      }
  }
}
</style>